<template>
	<view class="all">
		<view class="conet">
			<view class="money">{{money}}</view>
			<view class="sum">交易金额 (元)</view>
			<view class="message">
				<text>基金名称</text>
				<text>{{name}}</text>
			</view>
			<view class="message">
				<text>交易账户</text>
				<text>6230****8417</text>
			</view>
			<view class="message">
				<text>交易时间</text>
				<text>2023-08-07</text>
			</view>
			<view class="message">
				<text>交易类型</text>
				<text>预约申购</text>
			</view>
			<view class="message">
				<text>交易状态</text>
				<text>预约</text>
			</view>
			<view class="message">
				<text>流水号</text>
				<text>04404564511684550</text>
			</view>
		</view>
		<!-- 密码输入框和数字键盘 -->
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			:dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<button class="ok" @click="ok">确认</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: this.$route.query.money,
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				name: this.$route.query.name
			}
		},
		methods: {
			// 监听键盘输入：
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			// 监听键盘回退：
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			// 结束函数：
			finish() {
				this.showKeyboard = false;
				//可以放请求的接口及付款后的判断等
				uni.showToast({
					title: '购买成功'
				});
				setTimeout(function() {
					uni.hideLoading();
					uni.navigateTo({
						url: "/pages/fundAutomatic/fundAutomatic"
					})
				}, 2000);
			},
			ok() {
				this.showKeyboard = true;
				this.password = ''; //唤醒输入组件时清空密码 // 显示密码输入框

			}
		}
	}
</script>

<style scoped>
	.all {
		background-color: #eaeaea;
		height: 1550rpx;
	}

	.conet {
		background-color: white;
	}

	.money {
		height: 150rpx;
		border-top: 1rpx solid #f5f5f5;
		font-size: 70rpx;
		text-align: center;
		padding-top: 50rpx;
	}

	.sum {
		margin-left: 300rpx;
		margin-bottom: 60rpx;
	}

	/* 交易信息 */
	.message {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx;
		border-top: 1rpx solid #f5f5f5;
		height: 80rpx;
	}

	/* 确认 */
	.ok {
		width: 90%;
		height: 80rpx;
		background-color: orange;
		color: white;
		margin-top: 60rpx;
	}
</style>